<template>
  <div :class="['ll-title',{'active':index==disvior}]" @click="goto">
    <div>{{title.anchor_point}}</div>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
    index: Number,
    disvior: Number,
  },
  data() {
    return {
      title: this.item,
    };
  },
  methods:{
      goto(){
          this.$emit("status",this.index)
      }
  }
};
</script>

<style scoped>
.ll-title {
  height: 50px;
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.active{
    border-left: 3px solid red;
    color: red;
}
</style>